<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>词云测试</title>
  <script src="echarts.js"></script>
  <script src="echarts-wordcloud.js"></script>
</head>
<body>

<div id="main" style="width: 400px; height: 400px; background-color: papayawhip"></div>


<script>
    var chart = echarts.init(document.getElementById('main'));

    var maskImage = new Image();
    maskImage.src = "user.png";

    maskImage.onload = function () {
        chart.setOption({
            series: [{
                type: 'wordCloud',

                // The shape of the "cloud" to draw. Can be any polar equation represented as a
                // callback function, or a keyword present. Available presents are circle (default),
                // cardioid (apple or heart shape curve, the most known polar equation), diamond (
                // alias of square), triangle-forward, triangle, (alias of triangle-upright, pentagon, and star.

                shape: 'circle',

                // A silhouette image which the white area will be excluded from drawing texts.
                // The shape option will continue to apply as the shape of the cloud to grow.

                maskImage: maskImage,

                // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
                // Default to be put in the center and has 75% x 80% size.

                left: 'center',
                top: 'center',
                width: '100%',
                height: '100%',
                right: null,
                bottom: null,

                // Text size range which the value in data will be mapped to.
                // Default to have minimum 12px and maximum 60px size.

                sizeRange: [8, 40],

                // Text rotation range and step in degree. Text will be rotated randomly in range [-90, 90] by rotationStep 45

                rotationRange: [-90, 90],
                rotationStep: 45,

                // size of the grid in pixels for marking the availability of the canvas
                // the larger the grid size, the bigger the gap between words.

                gridSize: 2,

                // set to true to allow word being draw partly outside of the canvas.
                // Allow word bigger than the size of the canvas to be drawn
                drawOutOfBound: false,

                // Global text style
                textStyle: {
                    normal: {
                        fontFamily: 'sans-serif',
                        fontWeight: 'bold',
                        // Color can be a callback function or a color string
                        color: function () {
                            // Random color
                            return 'rgb(' + [
                                Math.round(Math.random() * 160),
                                Math.round(Math.random() * 160),
                                Math.round(Math.random() * 160)
                            ].join(',') + ')';
                        }
                    },
                    emphasis: {
                        shadowBlur: 10,
                        shadowColor: '#333'
                    }
                },

                // Data is an array. Each array item must have name and value property.
                data: [{"name": "他们", "value": 9}, {"name": "陛下", "value": 9}, {"name": "应当", "value": 4}, {
                    "name": "事情",
                    "value": 4
                }, {"name": "如果", "value": 3}, {"name": "希望", "value": 3}, {"name": "没有", "value": 3}, {
                    "name": "已经",
                    "value": 3
                }, {"name": "费祎", "value": 3}, {"name": "原因", "value": 3}, {"name": "亲近", "value": 3}, {
                    "name": "托付",
                    "value": 3
                }, {"name": "能够", "value": 3}, {"name": "这些", "value": 3}, {"name": "忠诚", "value": 3}, {
                    "name": "疏远",
                    "value": 2
                }, {"name": "奸邪", "value": 2}, {"name": "大事", "value": 2}, {"name": "国家", "value": 2}, {
                    "name": "因此",
                    "value": 2
                }, {"name": "所以", "value": 2}, {"name": "接受", "value": 2}, {"name": "时候", "value": 2}, {
                    "name": "之所以",
                    "value": 2
                }, {"name": "认为", "value": 2}, {"name": "任务", "value": 2}, {"name": "志向", "value": 2}, {
                    "name": "诚实",
                    "value": 2
                }, {"name": "临终", "value": 2}, {"name": "以来", "value": 2}, {"name": "报答", "value": 2}, {
                    "name": "自己",
                    "value": 2
                }, {"name": "善良", "value": 2}, {"name": "现在", "value": 2}, {"name": "朝廷", "value": 2}, {
                    "name": "公正",
                    "value": 2
                }, {"name": "追念", "value": 2}, {"name": "平定", "value": 2}, {"name": "一定", "value": 2}, {
                    "name": "兴隆",
                    "value": 2
                }, {"name": "叹息", "value": 2}, {"name": "身份", "value": 2}, {"name": "以致", "value": 2}, {
                    "name": "将士",
                    "value": 2
                }, {"name": "应该", "value": 2}, {"name": "忠心", "value": 2}, {"name": "军队", "value": 2}, {
                    "name": "建议",
                    "value": 2
                }, {"name": "汉朝", "value": 2}, {"name": "地区", "value": 1}, {"name": "所以", "value": 2}, {"name": "接受", "value": 2}, {"name": "时候", "value": 2}, {
                    "name": "之所以",
                    "value": 2
                }, {"name": "认为", "value": 2}, {"name": "任务", "value": 2}, {"name": "志向", "value": 2}, {
                    "name": "诚实",
                    "value": 2
                }, {"name": "临终", "value": 2}, {"name": "以来", "value": 2}, {"name": "报答", "value": 2}, {
                    "name": "自己",
                    "value": 2
                }, {"name": "善良", "value": 2}, {"name": "现在", "value": 2}, {"name": "朝廷", "value": 2}, {
                    "name": "公正",
                    "value": 2
                }, {"name": "追念", "value": 2}, {"name": "平定", "value": 2}, {"name": "一定", "value": 2}, {
                    "name": "兴隆",
                    "value": 2
                }, {"name": "叹息", "value": 2}, {"name": "身份", "value": 2}, {"name": "以致", "value": 2}, {
                    "name": "将士",
                    "value": 2
                }, {"name": "应该", "value": 2}, {"name": "忠心", "value": 2}, {"name": "军队", "value": 2}, {
                    "name": "建议",
                    "value": 2
                }, {"name": "汉朝", "value": 2}, {"name": "地区", "value": 1}, {"name": "所以", "value": 2}, {"name": "接受", "value": 2}, {"name": "时候", "value": 2}, {
                    "name": "之所以",
                    "value": 2
                }, {"name": "认为", "value": 2}, {"name": "任务", "value": 2}, {"name": "志向", "value": 2}, {
                    "name": "诚实",
                    "value": 2
                }, {"name": "临终", "value": 2}, {"name": "以来", "value": 2}, {"name": "报答", "value": 2}, {
                    "name": "自己",
                    "value": 2
                }, {"name": "善良", "value": 2}, {"name": "现在", "value": 2}, {"name": "朝廷", "value": 2}, {
                    "name": "公正",
                    "value": 2
                }, {"name": "追念", "value": 2}, {"name": "平定", "value": 2}, {"name": "一定", "value": 2}, {
                    "name": "兴隆",
                    "value": 2
                }, {"name": "叹息", "value": 2}, {"name": "身份", "value": 2}, {"name": "以致", "value": 2}, {
                    "name": "将士",
                    "value": 2
                }, {"name": "应该", "value": 2}, {"name": "忠心", "value": 2}, {"name": "军队", "value": 2}, {
                    "name": "建议",
                    "value": 2
                }, {"name": "汉朝", "value": 2}, {"name": "地区", "value": 1}, {"name": "所以", "value": 2}, {"name": "接受", "value": 2}, {"name": "时候", "value": 2}, {
                    "name": "之所以",
                    "value": 2
                }, {"name": "认为", "value": 2}, {"name": "任务", "value": 2}, {"name": "志向", "value": 2}, {
                    "name": "诚实",
                    "value": 2
                }, {"name": "临终", "value": 2}, {"name": "以来", "value": 2}, {"name": "报答", "value": 2}, {
                    "name": "自己",
                    "value": 2
                }, {"name": "善良", "value": 2}, {"name": "现在", "value": 2}, {"name": "朝廷", "value": 2}, {
                    "name": "公正",
                    "value": 2
                }, {"name": "追念", "value": 2}, {"name": "平定", "value": 2}, {"name": "一定", "value": 2}, {
                    "name": "兴隆",
                    "value": 2
                }, {"name": "叹息", "value": 2}, {"name": "身份", "value": 2}, {"name": "以致", "value": 2}, {
                    "name": "将士",
                    "value": 2
                }, {"name": "应该", "value": 2}, {"name": "忠心", "value": 2}, {"name": "军队", "value": 2}, {
                    "name": "建议",
                    "value": 2
                }, {"name": "汉朝", "value": 2}, {"name": "地区", "value": 1}]

            }]
        });
    };

</script>
</body>
</html>